import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-comp-masonry-layouts',
  templateUrl: './comp-masonry-layouts.component.html',
  styleUrls: ['./comp-masonry-layouts.component.scss']
})
export class CompMasonryLayoutsComponent {

masonaryitems: any[] = [];

//src:作品名 ;profilephoto:用户头像

ngOnInit(): void{
  this.masonaryitems = [{
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/gfq1tj092515700.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/j10n01092506672.jpg',
    username: '灰猫',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '2'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/q15l9s092518483.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/j10n01092506672.jpg',
    username: '灰猫',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '5'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/sktn11092521051.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/u1b7g1092523546.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/sb421t092527233.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/h0j9r1092529938.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/pmjn2p092532437.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/i1skaj092534732.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/a1v3qd092538410.png',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/kj15s6092542336.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/81v86u092544711.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/cg1dva092547362.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/t41fe4092552796.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/gljh9r092557017.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/ks292r092600863.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/bk49o4092603823.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/u5s127092607956.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/0g1lu6092610661.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/fc1o68092614040.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/m19bv6092806730.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/4n16u8092809255.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/do2tm9092812896.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/jh7ns5092826540.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/ti35i1092829398.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/l812ls092831999.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/817o31092834738.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g1m12a092837613.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/1r7bqa092841490.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/c2d21t092844658.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/sg1r78092854000.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  },
  {
    src: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/u0g1vn092856709.jpg',
    name: '创作名',
    profilephoto: 'https://file-cloud.fmode.cn/E4KpGvTEto/20230808/g15opk092510011.jpg',
    username: '耶稣',
    introduce: '简介',
    createexplain: '创意描述内容,可在创作词库中选择喜欢的风格和描述进行AI绘图制作',
    imgnumber: '1张',
    iconcollect: 'iconfont icon-xingxing',
    countcollect: '20'
  }];

  this.masonaryitems.sort(() => Math.random() - 0.5);

}

//复制描述
copyTextToClipboard(text: string) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

//复制成功全局提示
createMessage(type: string): void {
  this.message.create(type, `copy  ${type}`);
}

constructor(private message: NzMessageService) {}

//点击瀑布流图片弹框设置
modalVisible = false;

//点击弹窗打开对应图片
// 在组件中声明selectedItem属性
selectedItem: any;

// openModal接收item参数，并设置selectedItem属性
openModal(item: any) {
  this.selectedItem = item;
  this.modalVisible = true;
}

closeModal() {
  this.modalVisible = false;
}

}